<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- {{arr}} -->
        <ul>
            <!-- <li v-for="item in arr">姓名是：{{item}}</li> -->
            <li v-for="(item,key) in arr">姓名是：{{item}} key值是{{key}}</li>
        </ul>
        <hr>
        <p v-for="(item,key,k) in obj">{{item}}--{{key}}---{{k}}</p>
        <hr>
        <p v-for="(item,key) in str">{{item}}{{key}}</p>
        <hr>
        <p v-for="item in num">{{item}}</p>
        <hr>
        <p v-for="(item,key) in users"> 姓名是{{item.name}} 年龄是{{item.age}}</p>
        <hr>
        <p v-for="(item,key) of users"> 姓名是{{item.name}} 年龄是{{item.age}}</p>
        <hr>
        姓名是：<input type="text" v-model="username" /> <br>
        年龄是：<input type="text" v-model="age" /> <br>
        <button @click="adduser">点击我添加用户</button>

    </div>
    <script>
        // v-for 循环指令
        // v-for 可以循环数组 ，可以循环对象,可以循环字符串,可以循环数字
        let vm = new Vue({
            el: "#app",
            data: {
                username: "",
                age: "",
                arr: ["张安", "李四", "王五"],
                str: "abcdefg",
                num: 3,
                obj: {
                    name: "张娜",
                    age: 20,
                    height: "178cm"
                },
                users: [{ name: "张三", age: 20 }, { name: "李四", age: 22 }, { name: "王五", age: 31 }]  // 对象数组  
            },
            methods: {
                adduser() {
                    // console.log(this.username,this.age);
                    this.users.push({ name: this.username, age: this.age });
                }
            }
        })
        let obj = {
            username: "",
            age: "",
            arr: ["张安", "李四", "王五"],
            str: "abcdefg",
            num: 3,
            obj: {
                name: "张娜",
                age: 20,
                height: "178cm"
            },
            users: [{ name: "张三", age: 20 }, { name: "李四", age: 22 }, { name: "王五", age: 31 }]
        }
        console.log(obj);
        console.log(vm._data);

        /*
        复习
        作业：1.员工列表 2.留言板
            数据驱动
            messages:[
                {content:"留言一",usernmae:"小明",replayarr:["回复一","回复二"]},
                {content:"留言二",usernmae:"小王"},
                {content:"留言三",usernmae:"小明",replayarr:["回复一","回复二"]}
            ]
        */


    </script>
</body>

</html>